<template>
	<text class="title">欢迎登录</text>
	<view class="login">
		<uni-forms :modelValue="formData" ref="form" :rules="rules">
			<uni-forms-item name="account">
				<input type="text" v-model="formData.account" placeholder="请输入身份证号码" />
			</uni-forms-item>
			<uni-forms-item name="password">
				<input type="password" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<button @click="submitForm">登录</button>
		<view class="btn">
			<view class="register" @click="toRegister">立即注册</view>
			<view class="reset_pwd" @click="toResetPwd">重置密码</view>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/login.js';
	import {
		userInfo
	} from '@/stores/userInfo.js';
	import {
		mixin
	} from '@/static/mixin.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				formData: {
					account: '',
					password: '',
					verify: ''
				},
				rules: {
					// 对name字段进行必填验证
					account: {
						rules: [{
							required: true,
							errorMessage: '请输入身份证号码',
						}]
					},
					// 对email字段进行必填验证
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}]
					}
				},
				items: ['学习记录', '学习统计'],
				current: 0,
				active: 0,
				dynamicList: []
			};
		},
		methods: {
			submitForm() {
				const info = userInfo();
				console.log(this.formData);
				this.$refs.form.validate().then(resInfo => {
					console.log('表单数据信息：', resInfo);
					login(this.formData).then(res => {
						console.log(res);
						info.setInfo(res.user);
						info.setToken(res.token);
						uni.reLaunch({
							url: '/pages/user/index'
						})
					}).catch(err => {
						console.log(err);
						if(err.data.code!==200){
							uni.showToast({
								icon: 'error',
								title: err.data.msg
							})
						}
						
					})
				}).catch(err => {
					// console.log('表单数据信息：', err);
				})
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			group(val) {
				this.active = val;
			},
			Class(val) {
				this.active = val;
			},
			toExam() {
				uni.navigateTo({
					url: '/pages/exam/index'
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			toRegister() {
				uni.navigateTo({
					url: '/pages/public/register'
				})
			},
			toResetPwd() {
				uni.navigateTo({
					url: '/pages/public/resetpwd'
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.title {
		display: flex;
		padding: 30px;
		padding-bottom: 10px;
		font-size: $uni-font-size-xxl;
		font-weight: 500;
	}

	.buttonActive {
		background-color: $uni-color-primary;
		color: #313131;
	}

	.login {
		padding: 30px;

		button {
			margin-top: 20px;
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: $uni-color-primary;
			color: $uni-text-color-white;
			font-weight: 700;
		}

		input {
			height: 30px;
			font-size: 18px;
		}

		:deep(.uni-forms-item) {
			border-bottom: 1px solid $uni-border-color;
			margin-bottom: 0;
			padding-top: 20px;
			padding-bottom: 19px;
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.register,
			.reset_pwd {
				padding-top: 20px;
				color: $uni-text-color-grey;
			}
		}


	}
</style>
